/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 * <p>
 * http://www.apache.org/licenses/LICENSE-2.0
 * <p>
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// 基于 animate.css 的CSS动画
@mixin animate($name, $duration) {
  -webkit-animation-name: $name;
  animation-name: $name;
  -webkit-animation-duration: $duration;
  animation-duration: $duration;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

// 卡片动画
@mixin card() {
  background-color: $white;
  border-radius: $border-radius;
  box-shadow: $card-shadow;
}

// 字体图标
@mixin font-icon($content, $font-size) {
  font-family: $font-family-icon;
  content: $content;
  font-size: $font-size;
}

// 选择背景动画
@mixin select-bg() {
  &:before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
    right: 0;
    bottom: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 8px 8px;
    border-color: transparent transparent #d1d1d1 transparent;
  }
}

// 按钮渐变动画
@mixin button-variant($background, $border, $active-background: darken($background, 3%), $active-border: darken($border, 3%)) {
  background-color: $background;
  border-color: $border;
  box-shadow: $btn-box-shadow;

  &:hover {
    background-color: $active-background;
    border-color: $active-border;
  }

  &.disabled,
  &:disabled {
    background-color: $background;
    border-color: $border;
  }

  &:active,
  &.active,
  .show > &.dropdown-toggle {
    background-color: $active-background;
    background-image: none; // 移除状态的渐变动画
    border-color: $active-border;
  }
}

// 概述按钮渐变动画
@mixin button-outline-variant($color, $color-hover: #fff) {
  color: $color;
  background-color: transparent;
  background-image: none;
  border-color: $color;

  @include hover {
    color: $color-hover;
    background-color: $color;
    border-color: $color;
  }

  &.disabled,
  &:disabled {
    color: $color;
    background-color: transparent;
  }

  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $color-hover;
    background-color: $color;
    border-color: $color;
  }
}

// 按钮动画样式
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
  line-height: $line-height;
  @include border-radius($border-radius);
}

// 文字溢出样式
@mixin text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 背景图像覆盖样式
@mixin bg-cover($image) {
  background-image: url($image);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
}

// 概述背景图像覆盖样式
@mixin bg-cover-inline() {
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
}

// 告警渐变动画
@mixin alert-variant($background, $border, $color) {
  color: $color;
  background-color: $background;
  border-color: $border;

  hr {
    border-top-color: darken($border, 5%);
  }

  .alert-link {
    color: $color;
    border-bottom: 1px dotted lighten($color, 35%);

    &:hover {
      color: darken($color, 8%);
      border-color: lighten($color, 20%);
    }
  }

  &.alert-dismissible {
    .close {
      & > span {
        color: lighten($color, 15%);
      }
    }
  }
}
